<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/vue.js"></script>
</head>

<body>
  <div id="root">

    姓名：<input type="text" v-model.trim="account"> <br /><br />
    性别：
    男<input type="radio" name="sex" v-model="sex" value="male">
    女<input type="radio" name="sex" v-model="sex" value="female"> <br /><br />
    爱好：
    <input type="checkbox" v-model="hobby" value="study">学习
    <input type="checkbox" v-model="hobby" value="game">游戏
    <input type="checkbox" v-model="hobby" value="eat">吃东西
    <!-- <label v-for="(item,index) in hobby"><input type="checkbox" :value="index" v-model="checkedValue" />{{index}} -->
    </label>
    <br /><br />
    职业
    <select v-model="job" multiple>
      <option value="boss">老板</option>
      <option value="soft">软件工程师</option>
      <option value="lvshi">律师</option>
      <option value="teacher">教师</option>
    </select>
    <br /><br />
    个人简介：
    <textarea v-model.lazy="other"></textarea> <br /><br />
    年龄：<input type="number" v-model.number="age"> <br /><br />
    城市
    <select v-model="city">
      <option value="">请选择城市</option>
      <option value="厦门">厦门</option>
      <option value="上海">上海</option>
      <option value="深圳">深圳</option>
      <option value="武汉">武汉</option>
    </select><br /><br />
    <input type="checkbox" v-model="agree">阅读协议
    <button @click="tijiao" :disabled="agree === isTrue">提交</button>
    <div>
      <h2>您的个人信息是:</h2>
      <h2>{{userInfo}}</h2>
    </div>

  </div>


</body>
<script>
  Vue.config.productionTip = false
  new Vue({
    el: "#root",
    data: {
      account: '',
      age: 18,
      sex: 'female',
      hobby: [],
      city: 'xiamen',
      job: [],
      other: '',
      agree: false,
      userInfo: '',
      isTrue: false
    },
    methods: {
      tijiao() {
        this.userInfo = "用户名-" + this.account + "  性别-" + this.sex + "  年龄-" + this.age + "  爱好-" + this.hobby + "  职业-" + this.job + "  自我介绍-" + this.other + "  城市-" + this.city;
      }
    },


  })
</script>

</html>